<template>
  <div class="recommend">
    <div class="recommend-title">热门推荐</div>
    <router-link class="info" v-for="item in list" :key="item.id" tag="div" :to="'/detail/'+item.id">
      <img :src="item.imgUrl" alt>
      <div class="info-content">
        <div class="info-title">{{ item.title }}</div>
        <div class="info-introduce">{{ item.desc }}</div>
        <button class="item-button">查看详情</button>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  props:['list'],
  data() {
    return {

    };
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.recommend {
  .recommend-title {
    margin-top: 0.2rem;
    text-indent: 0.2rem;
    background-color: #eee;
    line-height: 0.8rem;
  }

  .info {
    display: flex;

    img {
      width: 1.7rem;
      height: 1.7rem;
      padding: 0.1rem;
    }

    .info-content {
      flex: 1;
      padding: 0.1rem;
      min-width: 0;

      .info-title {
        font-size: 0.32rem;
        line-height: 0.54rem;
        ellipsis();
      }

      .info-introduce {
        line-height: 0.4rem;
        color: #ccc;
        ellipsis();
      }

      .item-button {
        background-color: #ff9300;
        border-radius: 0.06rem;
        line-height: 0.28rem;
        margin-top: 0.16rem;
        color: #fff;
        padding: 0.1rem;
      }
    }
  }
}
</style>